Dependencies

• Shopify CLI: A command-line interface tool that helps you develop and manage your Shopify themes.
• TailwindCSS: A utility-first CSS framework for rapidly building custom designs.

Setup

We are using Tailwind as a standalone CLI tool. For more information, you can refer to the official guide.

Note: If you are setting this up on a Mac with an Intel processor, replace macos-arm64 with macos-x64 in the commands below.

1. Download the latest TailwindCSS binary for macOS with ARM64 architecture:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Make the downloaded file executable:

   chmod x tailwindcss-macos-arm64

3. Move the executable to a more convenient name:

   mv tailwindcss-macos-arm64 tailwindcss

4. Run the TailwindCSS watcher:

   • This command will watch for changes in your TailwindCSS source file (./assets/tailwind.css) and compile the output to your desired CSS file (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Publish

When you are ready to compile your CSS for production, you should use the following command to minify your CSS:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

This command will take your input CSS file (./assets/tailwind.css), process it with TailwindCSS, and output a minified CSS file (./assets/style.css) optimized for production.

Conclusion

Following these steps, you have successfully set up TailwindCSS as a standalone CLI tool and integrated it into your project. This setup allows you to efficiently develop and manage your CSS using Tailwind's utility-first approach. Running the watcher ensures that your CSS is automatically compiled during development, while the minification step prepares your CSS for production, optimizing it for performance. This streamlined process helps maintain a clean and maintainable codebase, allowing you to focus on building and customizing your Shopify theme with ease.